<template>
  <div class="receive_box">
    <div class="no-content" v-if="loginStatus !== 1">
      您还没有权限访问
    </div>
    <div class="receive_wrapper" v-else>
      <div class="receive_cell ">
        <div class="addr_box add_new_addr clearfix" @click="openNewAddr">
          <div class="add_new">
            <i class="el-icon-circle-plus _icon"></i>
            <h3>添加新地址</h3>
          </div>
        </div>
      </div>
      <div class="receive_cell" v-for="(receItem, receIndex) in receiveAddrList" :key="receIndex">
        <div class="addr_box clearfix">
          <div class="addr_head">
            <span class="name ellipsis">{{receItem.name}}</span>
            <a class="default" :class="{'active':receItem.defaultAddress}" @click="setDefaultAddr(receItem.id, receItem.defaultAddress)">{{receItem.defaultAddress ? '默认地址' :'设为默认'}}</a>
          </div>
          <h3 class="tel ellipsis">{{receItem.mobile | mobileFilter}}</h3>
          <div class="addr_detail ellipsis">
            {{receItem.province}}{{receItem.city}}{{receItem.area}} <br>
            {{receItem.address}} <span class="rt">{{receItem.postcode}}</span>
          </div>
          <div class="btns">
            <span class="color-blue" @click="modifyFun(receItem)">修改</span>
            <span class="color-blue" @click="delateAddr(receItem.id)">删除</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改地址 -->
    <el-dialog :title="addrtype === 0 ? '修改地址': '新增地址'" :visible.sync="dialogvisible" width="450px" top="20vh" center>
       <address-form  @addr-submit="addrPop" @close-dialog="closePop"></address-form>
    </el-dialog>
  </div>
</template>
<script>
  import { addressForm, tab } from '@/components/index'
  import { phoneReplace } from '@/tool/tool'
  import { Button, Form, FormItem, Dialog, Cascader, Input } from 'element-ui'
  import { mapActions, mapState, mapGetters } from 'vuex'
  import { MODIFYADDR } from '@/store/modules/address/mutations-types'
  export default{
    components: {
      addressForm,
      tab,
      elButton: Button,
      elForm: Form,
      elFormItem: FormItem,
      elDialog: Dialog,
      elCascader: Cascader,
      elInput: Input
    },
    data () {
      return {
        dialogvisible: false, // 修改地址的弹窗
        addrtype: 1, // 地址弹窗类型 0: 修改地址, 1: 新增地址
        modifyForm: {}
      }
    },
    computed: {
      ...mapState({
        receiveAddrList: state => state.address.allAddrList
      }),
      ...mapGetters(['loginStatus'])
    },

    methods: {
      // 修改地址
      modifyFun (data) {
        this.addrtype = 0
        this.$store.commit(MODIFYADDR, data)
        this.dialogvisible = true
      },
      // 新增一个地址
      openNewAddr () {
        this.addrtype = 1
        this.$store.commit(MODIFYADDR, {addr: []})
        this.dialogvisible = true
      },
      addrPop (result) {
        this.dialogvisible = result
      },
      // 关闭地址弹窗
      closePop () {
        this.dialogvisible = false
        // this.getAll()
      },
      // 获取地址列表
      ...mapActions({
        getAll: 'fetchAllAddrList',
        delateAddr: 'fetchDeleteAddr'
      }),
      // 设置默认地址
      setDefaultAddr (addrId, isdefault) {
        let obj = {}
        obj.isdefault = isdefault
        obj.addrId = addrId
        this.$store.dispatch('fetchSetDefaultAddr', obj)
      }
    },

    mounted () {
      if (this.loginStatus !== 1) return
      this.getAll() // 获取所有
    },
    filters: {
      phoneReplace,
      mobileFilter (mobile) {
        let mobArr = mobile.split('')
        let mob = mobArr.reduce(function (total, currentValue, currentIndex, arr) {
          if (currentIndex > 2 && currentIndex < 7) {
            return total + '*'
          } else {
            return total + currentValue
          }
        })
        return mob
      }
    }
  }
</script>
<style lang="scss" scoped>
  .receive_wrapper{
    margin-top: 24px;
    font-size: 0;
  }
  .addr_box{
    position: relative;
    border: 1px solid #DCDCDC;
    padding: 30px 18px;
    font-size: 14px;
    color: #666666;
    height: 180px;
    box-sizing: border-box;
    .tel, .addr_detail{
      width: 226px;
      font-size: 14px;
      color: #888888;
      line-height:1.5;
      letter-spacing: 0.02em;
    }
    .tel{line-height: 32px;}
    .btns{
      text-align: right;
      margin-top: 14px;
      font-size: 14px;
      color: #2A91D2;
      span{
        padding-right: 10px;
      }
    }
    .add_new{
      padding-top: 30px;
      text-align: center;
      color:#cbc9c9;
      font-size: 18px;
      line-height: 1.5;
      ._icon{
        font-size: 30px;
      }
      h3{
        font-size: 16px;
      }
    }
  }
  .receive_cell{
    font-family: PingFangSC-Regular, Microsoft YaHei;
    display: inline-block;
    cursor: pointer;
    width: 264px;
    margin-right: 20px;
    margin-bottom: 20px;
    vertical-align: middle;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
  .addr_head{
    margin-bottom: 10px;
    .name{
      display:inline-block;
      width:170px;
      font-size: 20px;
      color: #333333;
    }
    .default{
      float:right;
      color:#2A91D2;
      font-size: 14px;
    }
    .active{
      color:#999;
    }
  }
  .rt{
    float: right;
  }

</style>

